<template>
  <common-info-dialog
    :visible.sync="dialogShow"
    @cancel="close"
    :infoLoading="infoLoading"
    :title="dialogTitle"
    width="60%"
  >
    <div class="preview-area">
      <common-excel-preview
        ref="ExcelConfig"
        :configuration="configuration"
        v-if="hasData"
      >
      </common-excel-preview>
    </div>
  </common-info-dialog>
</template>

<script>
import CommonExcelPreview from "@/components/CommonExcelPreview";
import { getReportInfo } from "@/api/screenConfig/dataReport";

export default {
  components: {
    CommonExcelPreview,
  },
  props: {},

  data() {
    return {
      configuration: {
        table: [],
      },

      dialogShow: false,
      dialogTitle: "",
      infoLoading: false,
      hasData: false,
    };
  },

  methods: {
    close() {
      this.dialogShow = false;
    },
    show(data) {
      this.dialogTitle = data.name + "的报告详情";
      this.dialogShow = true;
      this.getInfo(data.id);
    },

    getInfo(id) {
      this.infoLoading = true;
      this.hasData = false;
      getReportInfo({ id: id, sourceType: "report_center", classType: 0 })
        .then((res) => {
          if (res && res.code === 200) {
            this.configuration = JSON.parse(res.data.configuration);
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        })
        .finally(() => {
          setTimeout(() => {
            this.hasData = true;
            this.infoLoading = false;
          }, 1000);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.preview-area {
  height: 500px;
}
::v-deep .common-preview-excel-wrap .common-table-wrap {
  height: 100%;
}
</style>
